<template>
  <div>
    <div class="main_navigator">
      <el-breadcrumb separator="/" style="font-size:18px;">
        <el-breadcrumb-item>
          <span @click="goBack">返回</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{crumbOne}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{crumbOne}}</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span :class="active_crumb">{{crumbOne}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_content">
      <!-- 绿色 009688 -->
      <el-button type="success">绿色 009688 success</el-button>
      <!-- 青色 5FB878 -->
      <el-button>青色 5FB878 default</el-button>
      <!-- 蓝色 1E9FFF -->
      <el-button type="primary">蓝色 1E9FFF primary</el-button>
      <!-- 橙色 FF5722 -->
      <el-button type="danger">橙色 FF5722 danger</el-button>
      <!-- 灰色 E6E6E6  字： 797979 -->
      <el-button type="info">灰色 E6E6E6 字： 797979 info</el-button>
      <!-- 黄色 FFB800 -->
      <el-button type="warning">黄色 FFB800 warning</el-button>
      <br>
      <br>
      <h2>文字颜色 333333 666666 999999</h2>
      <br>
      <div>
        <span
          style="color:#333333"
        >中共中央总书记、国家主席、中央军委主席习近平近日对垃圾分类工作作出重要指示。他强调，要培养垃圾分类的好习惯，为改善生活环境作努力，为绿色发展可持续发展作贡献。垃圾分类看似是微不足道的“小事”，习近平却一直很重视。无论是考察调研还是会议座谈，他时常会问起。这件“小事”，一直牵动习近平的心</span>
        <br>
        <span
          style="color:#666666"
        >中共中央总书记、国家主席、中央军委主席习近平近日对垃圾分类工作作出重要指示。他强调，要培养垃圾分类的好习惯，为改善生活环境作努力，为绿色发展可持续发展作贡献。垃圾分类看似是微不足道的“小事”，习近平却一直很重视。无论是考察调研还是会议座谈，他时常会问起。这件“小事”，一直牵动习近平的心</span>
        <br>
        <span
          style="color:#999999"
        >中共中央总书记、国家主席、中央军委主席习近平近日对垃圾分类工作作出重要指示。他强调，要培养垃圾分类的好习惯，为改善生活环境作努力，为绿色发展可持续发展作贡献。垃圾分类看似是微不足道的“小事”，习近平却一直很重视。无论是考察调研还是会议座谈，他时常会问起。这件“小事”，一直牵动习近平的心</span>
      </div>
      <div>
        <h2>样式说明</h2>
        <span>（1）所有弹框的“确定”按钮居中对齐。</span>
        <br>
        <span>（2）所有弹框中有表格的显示画面，如果实际数据内容过长，应该是表格横滚动条出现。出现横滚动条时，第一列的选择框拖拽时不能被隐藏。根据实际情况考虑到美观与直观度，可能某些页面不以弹框显示，改为跳转到新页面显示。</span>
        <br>
        <span>（3）所有机能画面（包括明细表格和输入框）的显示对齐原则为：</span>
        <br>
        <span>【序号】类：居中</span>
        <br>
        <span>【文字】类：左对齐</span>
        <br>
        <span>【纯数字】类：右对齐</span>
        <br>
        <span>【英数字混合】类：左对齐</span>
        <br>
        <span>【日期】类：居中</span>
        <br>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: "",
      active_crumb: "active_crumb", //面包屑当前颜色
      tableHeaderStyle: {
        "background-color": "rgb(201,222,251)"
      },
      crumbOne: "开发规范"
    };
  },
  components: {},
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.active_crumb {
  color: rgb(90, 160, 230);
}
</style>


